<template>
    <div class="layerTree">
        <div class="title">图层目录</div>
        <el-tree
            ref="treeInstance"
            node-key="id"
            tyle="max-width: 600px"
            :data="docData"
            :props="defaultProps"
            show-checkbox
            :default-expanded-keys="[nodeId]"
            @check-change="handleCheckChange"
        >
            <template #default="{ node, data }">
                <span class="customTreeNode">
                    <img :src="getIconUrl(data.GeomType)" alt="" />
                    <span>{{ node.label }}</span>
                </span>
            </template>
        </el-tree>
    </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";

import { getLayersInfo, getMapDocInfo } from "@/api/mapgis-api";

const { proxy } = getCurrentInstance();


//默认属性
const defaultProps = {
    children: "children",
    label: "label",
};
//底图文档节点树数据
let nodeId = 1; //节点id
const docData = ref([
    {
        id: nodeId++,
        label: "文档名称",
        disabled: true,
        children: [],
    },
]);
//默认选中节点
const treeInstance = ref(null);
//服务信息
const service = {
    docName: import.meta.env.VITE_MAPGIS_DOC_NAME,
};
//图标映射
const iconMap = {
    Pnt: "Point.png",
    Lin: "Line.png",
    Reg: "Polygon.png",
};
//根据GeomType获取图标
const getIconUrl = (GeomType) => {
    const iconUrl = new URL(
        `../../../assets/images/${iconMap[GeomType]}`,
        import.meta.url
    ).href;
    return iconUrl;
};

onMounted(async () => {
    //获取地图实例
    const map = proxy.$map;
    //获取地图文档信息
    let docInfo = await getMapDocInfo(service.docName);
    //获取图层信息
    docData.value[0] = {
        id: nodeId++,
        label: docInfo.Title,
        disabled: true,
        children: [],
    };
    //获取图层信息
    let layersInfo = await getLayersInfo(service.docName);
    docData.value[0].children = layersInfo.value.map((item) => {
        return {
            id: nodeId++,
            LayerIndex: item.LayerIndex,
            label: item.Name,
            children: [],
            GeomType: item.GeomType,
        };
    });
    //默认选中节点:下一次渲染时才生效
    nextTick(() => {
        treeInstance.value.setCheckedKeys([docData.value[0].id]);
    });
    // Promise.resolve().then(() => {
    //     treeInstance.value.setCheckedKeys([docData.value[0].id]);
    // });
});

//节点点击逻辑
const handleCheckChange = (data, checked) => {
    //点击节点更新图层显示
    const map = proxy.$map;
    //获取title为"高德地图"的图层
    const layers = map.getLayers().getArray();
    const mapgisLayer = layers.find(
        (item) => item.get("title") === "mapgis图层"
    );
    //设置目标图层显示隐藏
    mapgisLayer.setLayerStatus(
        data.LayerIndex,
        checked ? "include" : "exclude"
    );
};
</script>

<style scoped>
.layerTree {
    position: absolute;
    top: 150px;
    left: 10px;
    width: 250px;
    height: 400px;
    background-color: #fff;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.title {
    height: 40px;
    background-color: #2196f3;
    padding-left: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
}
:deep(.el-tree) {
    background-color: transparent;
}
.customTreeNode {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.customTreeNode img {
    padding-right: 10px;
}
</style>
